<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_页面全屏遮罩层</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="main">
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum qui veritatis vero. Aliquid aspernatur
                eveniet, ex facere illo minus molestiae, numquam optio praesentium quae quas qui quis ratione sint
                veritatis?
            </div>
            <div>Accusantium blanditiis deserunt dolore earum explicabo facilis ipsum iure maiores minima molestias
                mollitia nam nesciunt non numquam, porro possimus quas quis quo reiciendis repellendus saepe sit vel
                velit vero voluptas!
            </div>
            <div>Ab amet deleniti dolor doloribus esse excepturi in nostrum possimus praesentium quae qui quia similique
                suscipit voluptates, voluptatibus. Ad adipisci animi aspernatur assumenda consequatur distinctio error
                fugit modi saepe ullam.
            </div>
            <div>Adipisci aperiam autem facere libero, non obcaecati officia quaerat? A dolorem maxime recusandae
                voluptatem. Architecto at autem debitis dicta eius laborum necessitatibus nobis quidem, saepe vel.
                Eveniet impedit omnis veritatis.
            </div>
            <div>Alias aperiam cupiditate dignissimos dolore, dolorum eos excepturi illo incidunt natus nisi obcaecati,
                praesentium, sapiente sunt voluptates voluptatibus! Alias dolorem dolores ducimus ea eius esse ipsa
                laudantium quaerat unde vero?
            </div>
            <div>Accusantium alias commodi consectetur cumque, cupiditate dolore eaque facilis molestias natus neque
                nobis qui quos rem repellendus, sapiente, sit sunt ullam voluptate? Blanditiis eligendi est odio
                officia, reprehenderit saepe sit.
            </div>
            <div>Alias aspernatur at, debitis harum minima non numquam quo saepe. Deserunt dignissimos excepturi
                expedita ipsam libero nesciunt reiciendis saepe similique tenetur unde. Alias aut dolorum eos ex
                molestiae officiis, voluptatum.
            </div>
            <div>Ab assumenda aut cum deleniti dolores error esse eum incidunt, itaque minima nulla perferendis placeat
                possimus quaerat quam quasi qui quia quibusdam quisquam repellendus saepe sapiente sequi soluta, unde
                voluptatibus!
            </div>
            <div>A doloremque magnam voluptatem. Officia rem, vel! Alias, culpa ducimus eligendi est et explicabo in,
                iure laboriosam mollitia optio quisquam reiciendis repellendus repudiandae sapiente tempore vel vitae
                voluptate voluptatem voluptatibus?
            </div>
            <div>Blanditiis debitis ducimus minima suscipit. Aliquid eum facere hic illum, officia quas sed veritatis
                voluptatem. Amet cum, dignissimos, dolor, eaque error fugit quae quam qui quo reiciendis rem sapiente
                tempore.
            </div>
            <div>A alias, aliquid at corporis, debitis deleniti deserunt doloribus eaque expedita explicabo, inventore
                maxime mollitia natus odit praesentium quae quasi qui quia reiciendis rem repellat repellendus
                reprehenderit suscipit totam ullam.
            </div>
            <div>Accusantium consequatur, culpa deleniti earum enim id iure magnam non omnis pariatur quasi quia
                reiciendis sapiente temporibus unde! Commodi consequuntur deleniti et expedita nobis nulla quibusdam
                quidem quis quo saepe?
            </div>
            <div>Accusantium ad cumque debitis ex illo laborum numquam obcaecati pariatur perspiciatis, quas, recusandae
                repellendus tempore tenetur. Earum inventore ipsum quas quia quisquam quo vel! Fugiat incidunt magnam
                neque repellendus. Sunt?
            </div>
            <div>Autem commodi cum delectus eligendi iusto, laborum, magni molestias neque nobis nostrum odio officia
                optio pariatur quibusdam recusandae. At cumque ea esse iusto maxime nam nisi officiis. Ab, autem enim.
            </div>
            <div>Atque autem cum dolorum earum eligendi et eum fuga hic in ipsum iste libero molestias nesciunt nihil
                pariatur praesentium quae quam sapiente, similique totam unde vel vitae voluptatibus. Harum, quod.
            </div>
            <div>Blanditiis cupiditate deleniti dolores eaque eligendi, fugit hic impedit ipsum laboriosam libero minima
                minus mollitia nemo officia quae qui saepe sequi ullam unde veritatis! Aliquam aliquid nostrum omnis
                saepe sit.
            </div>
            <div>Aut obcaecati, temporibus! Blanditiis eum officiis rem veniam? At deleniti dicta eaque est ex hic magni
                minima provident quos vitae? Alias cum illum itaque iusto totam ut voluptas! Sapiente, vel?
            </div>
            <div>Adipisci, amet asperiores cupiditate doloribus ea error est excepturi fugiat iste, iusto laboriosam
                minus natus neque nulla, officia perspiciatis quasi qui unde vel vero. Ea eligendi maxime non obcaecati
                quod.
            </div>
            <div>Doloribus ea earum esse excepturi illum magnam quis reiciendis, repellendus saepe. Ad, beatae cumque
                doloremque error ex expedita fuga labore non officiis quidem sit sunt velit veniam veritatis vero
                voluptas.
            </div>
            <div>Accusamus atque autem delectus dolores ea hic iure minus pariatur quam repudiandae, sed, similique sit
                veritatis. A accusantium atque beatae cumque eos eveniet laborum laudantium repudiandae. Expedita ipsum
                modi quod.
            </div>
            <div>Aliquid animi at consequuntur, ex hic molestiae mollitia nisi, provident quasi sunt tempore voluptate.
                Delectus fugit officia saepe vitae. Consequatur doloremque dolores earum eligendi fugit laboriosam
                nostrum rerum temporibus voluptates?
            </div>
            <div>Alias at ea, impedit nesciunt numquam obcaecati quia reiciendis repellat sed tempora? A alias assumenda
                blanditiis dicta expedita impedit in incidunt labore, maiores necessitatibus qui quia quisquam quos
                voluptate voluptatibus!
            </div>
            <div>At, autem doloribus facere odio soluta unde voluptate! Adipisci aliquam aperiam asperiores consectetur
                consequuntur cum dolor eos eum laborum maiores placeat quaerat quis quos, repudiandae sed suscipit
                tempore! Aliquid, nisi!
            </div>
            <div>Architecto atque commodi consequatur deserunt doloribus earum eum ex fuga, harum laboriosam libero
                minima molestiae natus, nisi porro quasi quidem quisquam sequi sit tempore unde, ut velit veniam
                voluptate voluptatum.
            </div>
            <div>A adipisci alias animi asperiores aspernatur, assumenda commodi deleniti excepturi, expedita fugiat, id
                laudantium libero maxime non numquam optio possimus provident sunt temporibus vero! Cumque eos numquam
                officia repellendus voluptate.
            </div>
            <div>Accusamus dicta dolor facilis fuga harum, itaque iure magnam necessitatibus neque perferendis,
                reiciendis similique temporibus voluptatem? Accusantium amet dolorum eum facere laborum maxime nemo,
                nostrum nulla, quos ratione, sed vel?
            </div>
            <div>At cum, maxime nobis possimus quis reprehenderit! Assumenda atque culpa dignissimos eaque fugiat id
                laudantium officia officiis porro provident quo, sit soluta voluptatem? Aut esse iste minima rerum totam
                velit?
            </div>
            <div>Aliquid amet aspernatur atque beatae debitis, deserunt ea eaque impedit ipsum itaque nesciunt nihil
                nisi non omnis perspiciatis placeat, porro, praesentium quis recusandae reprehenderit tenetur veritatis
                vitae! Architecto fuga, quam?
            </div>
            <div>Accusantium commodi corporis ea est facilis, ipsam minus modi nesciunt nostrum quidem repellat
                similique totam? Architecto atque cupiditate dicta dolores earum eos, laudantium maiores quam quis
                repudiandae temporibus tenetur voluptas!
            </div>
            <div>Beatae delectus ea eius modi natus quaerat quod similique? Alias aperiam et explicabo fuga fugit
                molestiae mollitia natus obcaecati unde ut! Amet assumenda beatae magnam, optio quos rerum saepe sint!
            </div>
            <div>In maxime saepe sunt ut veritatis? Accusamus cum earum eius, fuga labore magni maxime necessitatibus,
                non officiis perferendis praesentium quibusdam repellendus tenetur. Corporis dolorem doloribus eligendi
                itaque nobis, quisquam ut.
            </div>
            <div>Autem dolor hic impedit incidunt non officia perferendis quia sit suscipit? Ab at atque aut commodi
                cupiditate deserunt dignissimos dolore dolores eius, libero possimus quaerat quidem reiciendis, soluta
                velit vero?
            </div>
            <div>Dolore dolorem excepturi inventore, qui quo quod recusandae rem rerum sequi ut, vel, voluptatum. Eos
                facilis natus perferendis quas sapiente voluptatibus? Animi atque dolorem facere iste laboriosam maxime
                nostrum repudiandae.
            </div>
            <div>Accusamus architecto consectetur cumque doloribus ea eius, enim facere id ipsum iure labore, laudantium
                nesciunt nulla perferendis placeat praesentium sed. Ad alias architecto blanditiis deleniti dignissimos
                dolorem dolorum minus voluptate.
            </div>
            <div>Ad aut commodi consequatur consequuntur culpa cumque deserunt esse est eum excepturi explicabo facere
                facilis harum id inventore ipsa magnam maiores, molestiae, necessitatibus placeat quaerat quia quod
                repellat ut veritatis.
            </div>
            <div>Laboriosam, perferendis temporibus. Ab aliquam cupiditate delectus, dignissimos ducimus eligendi eos et
                fuga in ipsum laboriosam mollitia, nesciunt nulla odio omnis pariatur perspiciatis porro, reprehenderit
                suscipit vitae? Consequuntur, impedit, tenetur.
            </div>
            <div>Ab esse ipsa numquam officia perspiciatis quos. Architecto consequuntur deserunt dolorum eligendi ex
                explicabo fuga impedit necessitatibus nisi nulla numquam obcaecati, quo unde! Amet, eos explicabo
                inventore molestias perferendis qui.
            </div>
            <div>Deleniti eum praesentium quisquam vel voluptas? Aliquid, animi asperiores consequatur dignissimos
                dolores earum hic impedit officiis omnis quam repudiandae saepe? Amet aperiam assumenda distinctio eius
                nemo ratione rem repellat rerum.
            </div>
            <div>Aliquam at autem culpa cum eum expedita, harum molestias natus nemo nulla, officiis quo quos
                repudiandae rerum tenetur velit voluptatem? Doloribus ea eaque eum fuga libero, magni mollitia obcaecati
                voluptatem!
            </div>
            <div>Ad adipisci distinctio eligendi sequi sit? Aspernatur, ipsum, veniam? Ab alias autem consequuntur
                delectus doloribus eum fugiat impedit ipsa maiores necessitatibus officiis porro quia quis rem sequi,
                sit voluptate? Fugiat.
            </div>
            <div>Ad aperiam architecto aspernatur consectetur est et eveniet expedita harum, hic inventore ipsam, labore
                pariatur perspiciatis placeat quasi recusandae repudiandae voluptate! Ab autem dolorum exercitationem
                nam nobis quidem recusandae ut?
            </div>
            <div>Ab eum modi natus neque odio odit omnis, possimus ullam vel voluptatem. A autem distinctio ducimus eum
                expedita facilis illum, impedit libero numquam, odio perspiciatis quas quia quisquam quo veritatis.
            </div>
            <div>A aut cumque dicta doloremque impedit maxime odio perspiciatis. A, accusamus at corporis culpa dicta
                dolor dolorem dolores ducimus ea eos expedita minima minus nesciunt, nulla odio reprehenderit voluptate
                voluptatibus.
            </div>
            <div>Ab aliquam animi commodi dignissimos distinctio dolorem et, eum ex hic magnam minima molestias nesciunt
                officiis praesentium quae quidem quisquam, quos similique ullam, vitae. Accusantium ducimus hic id illum
                quia.
            </div>
            <div>Accusamus blanditiis dolore illum in possimus quasi ratione reiciendis rerum voluptatum. Accusantium,
                cum cumque distinctio doloribus expedita itaque iure iusto nam nisi nobis officia quia suscipit
                temporibus tenetur unde. Consequatur?
            </div>
            <div>Architecto autem blanditiis culpa cumque cupiditate distinctio dolorem doloremque ducimus eos fugiat
                hic id laborum magni omnis porro provident quas ratione recusandae repellat rerum sunt temporibus,
                tenetur totam ullam voluptates.
            </div>
            <div>Ab accusantium asperiores dolore dolorem eligendi modi nobis reiciendis voluptates. Alias consequatur
                consequuntur dolorum est facilis ipsa maxime natus nobis praesentium, qui quisquam quo quod recusandae,
                tempora tempore? Blanditiis, nulla.
            </div>
            <div>Adipisci aliquam, culpa cumque earum fuga hic, incidunt iste iure labore laboriosam nemo, nobis optio
                quaerat quas quis quod reiciendis repellendus similique sunt ullam velit veniam vitae voluptatum.
                Debitis, ea!
            </div>
            <div>Aliquid assumenda cumque cupiditate debitis facere facilis fugiat illum impedit ipsam labore, nobis
                perferendis, placeat porro praesentium ratione, repudiandae sit. Ad architecto aut dolorum eligendi
                laboriosam qui quod sequi temporibus?
            </div>
            <div>Amet blanditiis consequuntur cum delectus deleniti deserunt et fugit in, inventore iste itaque laborum
                magnam molestias mollitia necessitatibus, non numquam odio omnis perferendis perspiciatis quasi saepe
                temporibus, tenetur vero voluptatum!
            </div>
            <div>Asperiores impedit incidunt labore magni, minus nulla praesentium provident quo. Atque dolores dolorum
                error exercitationem harum itaque mollitia nobis quo quos voluptatibus. Consequuntur ea ex molestiae
                provident repellendus similique tempora.
            </div>
            <div>Aut cupiditate dignissimos doloribus eos esse et inventore, ipsam labore laudantium libero magni modi
                molestias odit optio pariatur perferendis possimus provident quam qui reiciendis sint, totam ullam. Hic,
                quis, sequi?
            </div>
            <div>Alias aspernatur consequatur cum delectus dolor eaque enim error esse est facere fugit inventore ipsam,
                laborum nam neque nihil, provident quasi quos ratione recusandae, repudiandae suscipit tempore
                temporibus voluptate voluptates?
            </div>
            <div>Aliquam aut eligendi, est exercitationem fugiat omnis sed veniam voluptas! Cum delectus ea libero minus
                nesciunt nobis omnis quia quod, repudiandae sed ullam veniam vero voluptas. Adipisci ducimus et
                veritatis?
            </div>
            <div>Adipisci atque corporis ea eos et harum illo inventore laboriosam libero nemo neque optio quia
                repellendus, unde, vitae. Adipisci architecto eveniet excepturi, expedita hic illo voluptatibus. Error
                quaerat quia sapiente?
            </div>
            <div>Aliquam, asperiores atque dicta earum error illum minus nobis non nostrum quam quasi rem similique sunt
                tempore velit. Distinctio eveniet mollitia nostrum nulla officia, perspiciatis veritatis. Delectus est
                harum omnis.
            </div>
            <div>Aliquid ea earum hic modi mollitia nostrum optio qui quod tempore voluptas? Asperiores enim fugit minus
                nemo nostrum officia quibusdam. Accusamus cupiditate dicta dolorem fugiat praesentium reiciendis
                reprehenderit sapiente sit.
            </div>
            <div>Accusantium aliquid animi consectetur, dolorem doloribus ea earum error, illo incidunt ipsam magnam
                modi molestiae necessitatibus nemo nihil optio porro possimus quaerat quis quo repellat sapiente
                similique sint, tempore tenetur!
            </div>
            <div>Ab eligendi expedita mollitia similique. A, ad, adipisci consectetur consequatur debitis deserunt
                distinctio dolor in, ipsam laudantium necessitatibus obcaecati odio possimus quam reprehenderit soluta
                veniam vitae. Beatae dicta eligendi soluta.
            </div>
            <div>Adipisci aut delectus dignissimos dolor eos expedita porro possimus, praesentium quae quam quasi,
                ratione veniam! Ad animi doloremque ea explicabo iste tempora ut. Eveniet nihil nobis quas quisquam, sed
                sit?
            </div>
        </div>
    </div>
</body>
</html>